<template>
  <div class="iconPreview">
    <div class="metion">
      <svg-icon name="Warning"></svg-icon>
      <span>&nbsp;所有图标的名称都能这么使用{{ text }}，按下Ctrl+F搜索</span>
    </div>
    <xu-divider title>自定义svg图标</xu-divider>
    <div class="grid-box">
      <div class="box-item" v-for="(item, index) in svgArr" :key="index" @click="handleClick(item)">
        <svg-icon :name="item"></svg-icon>
        <div style="margin-top: 10px">{{ item }}</div>
      </div>
    </div>
    <xu-divider title>element图标</xu-divider>
    <div class="grid-box">
      <div class="box-item" v-for="(item, index) in Object.keys(allIcon)" :key="index" @click="handleClick(item)">
        <el-icon>
          <component :is="item" />
        </el-icon>
        <div style="margin-top: 10px">{{ item }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as allIcon from '@element-plus/icons-vue'
defineOptions({ name: 'iconPreview' })

let text = '<svg-icon name="Warning"></svg-icon>'
const handleClick = async (item: string) => {
  try {
    await navigator.clipboard.writeText(item)
    window.$message.success('复制成功')
  } catch (err) {
    console.error('Failed to copy: ', err)
  }
}
let svgFiles = import.meta.glob('@/assets/icons/*.svg')
let svgArr = Object.keys(svgFiles).map((item) => item.split('/').pop()?.split('.').shift()) as string[]
</script>

<style lang="scss" scoped>
.iconPreview {
  .metion {
    color: var(--el-text-color-regular);
  }

  .grid-box {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-top: 1px solid var(--el-border-color);
    border-left: 1px solid var(--el-border-color);

    .box-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 90px;
      color: var(--el-text-color-regular);
      border-right: 1px solid var(--el-border-color);
      border-bottom: 1px solid var(--el-border-color);

      &:hover {
        cursor: pointer;
        background-color: var(--el-border-color-extra-light);
      }
    }
  }
}
</style>
